<template>
	<!-- 微信语音识别 -->
	<view class="mask" v-show="isShow">
		<view class="weixin-asr">
			<view class="title">语音识别</view>

			<view class="spinner">
				<view class="rect rect1"></view>
				<view class="rect rect2"></view>
				<view class="rect rect3"></view>
				<view class="rect rect4"></view>
				<view class="rect rect5"></view>
			</view>
			<view class="tip">说出查询关键词</view>
			<button class="btn" type="default" @click="recordStop">说完了</button>
		</view>
	</view>
	<!-- <view>123</view> -->
</template>

<script>
	const WechatSI = requirePlugin("WechatSI");
	const ASRManager = WechatSI.getRecordRecognitionManager();

	export default {
		data() {
			return {
				isShow: false
			}
		},
		onReady() {
			// 录音开启成功回调
			ASRManager.onStart = function(res) {
				_this.isShow = true;
			}

			const _this = this;
			// 识别错误事件  
			ASRManager.onError = (res) => {
				_this.isShow = false;
				console.log('err',res);
			}

			// 录音停止回调
			ASRManager.onStop = function(res) {
				if (res && res.result) {
					_this.$emit('callback', res.result);
				} else {
					uni.showToast({
						icon: 'none',
						title: '抱歉，没听到您的声音哦'
					})
				}
			}
		},
		methods: {
			data() {
				return {
					isShow: false,
				}
			},
			show() {
				const _this = this;
				// 获取是否授权信息
				uni.getSetting({
					success(res) {
						if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.record')) {
							if (res.authSetting['scope.record']) {
								start();
							} else { // 拒绝授权，打开授权设置
								uni.openSetting({
									success() {
										start();
									}
								})
							}
						} else {
							start();
						}
					}
				})

				function start() {
					ASRManager.start({
						lang: "zh_CN"
					});
				}
			},
			// 录音停止
			recordStop() {
				this.isShow = false;
				ASRManager.stop();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 748943649;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .54);
	}

	.weixin-asr {
		position: absolute;
		top: calc(50% - #{477upx / 2});
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 560upx;
		height: 477upx;
		background: #fff;
		text-align: center;
		transform: .5s ease-out .5s;

		.title {
			margin-top: 42upx;
			color: #000;
			font-size: 34upx;
			font-weight: 500;
		}

		.spinner {
			margin: 50upx;
			height: 100upx;
		}

		.tip {
			color: #787878;
		}

		.btn {
			margin-top: 28upx;
			width: 225upx;
			height: 82upx;
			background: $miva-color-base;
			color: #fff;
			font-size: 34upx;
			line-height: 82upx;
			border-radius: 82upx;
		}
	}

	.spinner {
		text-align: center;
	}

	.spinner>.rect {
		background-color: #EDAA35;
		height: 100%;
		border-radius: 13upx;
		width: 13upx;
		display: inline-block;

		-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
		animation: stretchdelay 1.2s infinite ease-in-out;

		&+.rect {
			margin-left: 15upx;
		}
	}

	.spinner .rect2 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.spinner .rect3 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}

	.spinner .rect4 {
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.spinner .rect5 {
		-webkit-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}

	@-webkit-keyframes stretchdelay {

		0%,
		40%,
		100% {
			-webkit-transform: scaleY(0.4)
		}

		20% {
			-webkit-transform: scaleY(1.0)
		}
	}

	@keyframes stretchdelay {

		0%,
		40%,
		100% {
			transform: scaleY(0.4);
			-webkit-transform: scaleY(0.4);
		}

		20% {
			transform: scaleY(1.0);
			-webkit-transform: scaleY(1.0);
		}
	}
</style>
